@extends('layouts.layouts')
@section('title')
    <title>生成二维码-赛普健身社区后台管理</title>
    
@endsection
@section('content')
    
    <div class="content">
        <div class="header">
            <ul class="breadcrumb">
                <li><a href="">微信公众号管理</a> </li>
                
            </ul>
        </div>
        <div class="main-content">
            <ul class="nav nav-tabs nav-tabs-course">
                <li role="presentation" class="course_add active"><a href="javascript:void(0);">添加信息</a></li>
            </ul>

            <form class="form-horizontal" id="courseFormInfo" action="" method="post">
                {{csrf_field()}}
                <div class="row">
                    
                    <div class="col-md-8">
                        <br>
                        <div class="tab-content">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label">添加参数</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" id="inputEmail3" name="info" placeholder="添加参数例如：test">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="tab-content">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label"></label>
                                <div class="col-sm-3">
                                    <input type="button" class="btn btn-primary btn-lg" value="生成"  id="create_btn" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="/js/ueditor.js"></script>
    <script src="/js/course.js"></script>
    <script src="/lib/jquery.validate.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            $("#create_btn").click(function(){
                var info = $("input[name='info']").val();
                if(info==""){
                    alert("请填写参数");
                    return;
                }
                $.ajax({
                    type:"get",
                    url:"/wechat/cqrcode",
                    data:{info:info},
                    dataType:'json',
                    success:function(result){
                        if(result.code==1){
                            $("#bigimg").attr("src", result.msg);
                            $("#outerdiv").fadeIn("fast");//淡入显示#outerdiv及.pimg  
                            var windowW = $(window).width();//获取当前窗口宽度  
                            var windowH = $(window).height();//获取当前窗口高度  
                            var realWidth = $("#bigimg").width();//获取图片真实宽度  
                            var realHeight= $("#bigimg").height();//获取图片真实高度 
                            console.log(realWidth); 
                            var imgWidth  = 0;
                            var imgHeight = 0;  
                            var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放 
                            if(realHeight>windowH*scale){
                                console.log(1); 
                                imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放  
                                imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度  
                                if(imgWidth>windowW*scale){
                                    imgWidth = windowW*scale;//再对宽度进行缩放  
                                }
                            }else if(realWidth>windowW*scale){
                                console.log(2); 
                                imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放  
                                imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度  
                            }else{
                                console.log(3); 
                                imgWidth = realWidth;  
                                imgHeight = realHeight;  
                            }
                            $(bigimg).css("width",200);//以最终的宽度对图片缩放 
                            var w = (windowW-imgWidth)/2;//计算图片与窗口左边距  
                            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距  
                            $("#innerdiv").css({"top":h, "left":w});//设置#innerdiv的top和left属性  
                            $("#outerdiv").click(function(){
                                $(this).fadeOut("fast"); 
                            });
                        }
                        
                    }
                });
            });
        });
        
    </script>
    
@endsection